<template>
  <div class="app-container">
    <el-row>
      <el-card shadow="always" :body-style="{ padding: '20px 20px 0px 20px' }">
        <el-form ref="form" label-position="right" inline :model="requestFilter" label-width="100px" size="mini">
          <el-row>
            <el-form-item label="EMPI号：">
              <el-input v-model="requestFilter.id"></el-input>
            </el-form-item>
            <el-form-item label="证件号码：">
              <el-input v-model="requestFilter.idnumber"></el-input>
            </el-form-item>
            <el-form-item label="姓名：">
              <el-input v-model="requestFilter.name"></el-input>
            </el-form-item>
            <el-form-item label="性别：">
              <el-select v-model="requestFilter.sex">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="相关记录：">
              <el-radio v-model="relFlag" :label="1">相同</el-radio>
              <el-radio v-model="relFlag" :label="2">相似</el-radio>
            </el-form-item>
            <el-form-item style="padding-left: 40px">
              <el-button type="primary" @click="fetchData">查询</el-button>
              <el-button>清空</el-button>
            </el-form-item>
          </el-row>

        </el-form>
      </el-card>
    </el-row>

    <el-card shadow="always" style="margin-top: 10px">
      <el-row>
        <el-col :span="12">
          <el-card shadow="always">
            <el-table
              :data="patientList.list"
              v-loading="listLoading"

              stripe
              highlight-current-row
              @current-change="showRel"
              size="mini"
              height="600"
              style="width: 100%">
              <el-table-column
                prop="id"
                width="80"
                label="EMPI号"
              >
              </el-table-column>
              <el-table-column
                prop="patientid"
                width="100"
                label="患者标识"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                width="80"
                label="姓名">
              </el-table-column>

              <el-table-column
                prop="idnumber"
                width="180"
                label="证件号码">
              </el-table-column>
              <el-table-column
                prop="businessphonenumber"
                label="联系电话">
              </el-table-column>
              <el-table-column
                label="生成时间">
                <template slot-scope="scope">{{ scope.row.createat|dateFormat }}</template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <div slot="header" >
              <span>{{tagTitleText}}</span>
            </div>
                <el-table
                  :data="relList"
                  v-loading="relListLoading"
                  stripe
                  size="mini"
                  height="540"
                  style="width: 100%">
                  <el-table-column
                    type="index"
                    label="序号"
                  />
                  <el-table-column
                    prop="patientid"
                    width="120"
                    label="患者标识"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="fieldsname"
                    width="180"
                    label="匹配字段">
                  </el-table-column>
                  <el-table-column
                    prop="weight"
                    width="80"
                    label="匹配权重">
                  </el-table-column>
                  <el-table-column
                    prop="systemname"
                    width="60"
                    label="来源">
                  </el-table-column>
                  <el-table-column
                    width="160"
                    label="匹配时间">
                    <template slot-scope="scope">{{ scope.row.createat|dateFormat }}</template>
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                  >
                    <template slot-scope="scope">
                      <el-button @click="showDetail(scope.row)" type="text" size="small">对比</el-button>
                    </template>
                  </el-table-column>
                </el-table>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-pagination
          :current-page.sync="requestFilter.pageIndex" :page-size="requestFilter.pageSize"
          :page-sizes="[20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          v-on:current-change="fetchData"
          :total="patientList.total">
        </el-pagination>
      </el-row>
    </el-card>
    <el-dialog
      :title="diagTitle"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <el-table
        :data="compareList"
        size="mini"
        height="480"
        v-loading="compareListLoading"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="field"
          label="字段名称"
        >
        </el-table-column>
        <el-table-column
          prop="nowValue"
          label="最新记录值"
        >
        </el-table-column>
        <el-table-column
          prop="newValue"
          label="匹配记录值">
        </el-table-column>
        <el-table-column
          prop="oldValue"
          label="被匹配记录值">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button v-if="relFlag=='2'" type="primary" @click="mergeRow">{{ buttonText }}</el-button>
        <el-button v-else type="primary" @click="spiltRow">{{ buttonText }}</el-button>
       </span>
    </el-dialog>

  </div>
</template>

<script>
import { merge } from '@/api/merge'
import { delRule } from '@/api/ruleconfig'

export default {
  data() {
    return {
      patientList: [],
      listLoading: false,
      relFlag: 1,
      requestFilter: {
        empiid: '',
        name: '',
        sex: '',
        idnumber: '',
        cardno: '',
        pageIndex: 1,
        pageSize: 20,
        issame: 1
      },
      relListLoading: false,
      relList: null,
      dialogVisible: false,
      compareList: [],
      compareListLoading: false,
      diagTitle: '',
      currentFields: '',
      currentIguid: null
    }
  },
  computed: {
    tagTitleText() {
      return this.relFlag == '1' ? '已关联记录' : '疑似相同记录'
    },
    buttonText() {
      return this.relFlag == '1' ? '拆 分' : '合 并'
    }
  },
  watch: {
    relFlag(newVal, oldVal) {
      if (newVal == '1') {
        this.requestFilter.isseem = '0'
        this.requestFilter.issame = '1'
      } else {
        this.requestFilter.isseem = '1'
        this.requestFilter.issame = '0'
      }
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      this.relList = []
      merge.getMergeList(this.requestFilter).then(response => {
        this.patientList = response.data
        this.listLoading = false
      })
    },
    showRel(val) {
      if (val) {
        this.relListLoading = true
        merge.getRelList({
          empiid: val.empiid,
          reltype: this.relFlag
        }).then(response => {
          this.relList = response.data
          this.relListLoading = false
        })
      }
    },
    showDetail(item) {
      this.compareList = []
      this.diagTitle = item.fieldsname
      this.dialogVisible = true
      this.compareListLoading = true
      this.currentIguid = item.iguid
      this.currentFields = item.fields
      merge.getCompareList(item.iguid).then(resp => {
          this.compareListLoading = false
          this.compareList = resp.data
        }
      )
    },
    tableRowClassName({ row, rowIndex }) {
      let str = ''
      if (row.oldValue !== row.newValue) {
        str += 'different-row'
      }
      if (this.containFields(row.field)) {
        str += ' in-rule-row'
      }
      return str
    },
    containFields(field) {
      const arr = this.currentFields.toUpperCase().split(',')
      return arr.includes(field.toUpperCase())
    },
    mergeRow() {
      this.$confirm('将要合并此记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        merge.mergeRow(this.currentIguid).then(resp => {
          this.dialogVisible = false
          this.$message({
            type: 'success',
            message: '合并成功!'
          })
          this.fetchData()
        })
      })

    },
    spiltRow() {
      this.$confirm('将要拆分此记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        merge.spiltRow(this.currentIguid).then(resp => {
          this.dialogVisible = false
          this.$message({
            type: 'success',
            message: '拆分成功!'
          })
          this.fetchData()
        })
      })

    }
  }
}
</script>

<style>
.different-row {
  color: red;
}

.in-rule-row {
  font-weight: bold;
  background: #f0f9eb !important;
}
</style>
